<template>
	<div>
		<view class="wrap">
			<view class="wrap-content">
				<view class="item">
					<view class="left"> 类别 </view>

					<picker mode="selector" :range="typeList" range-key="title" @change="onTypeChange">
						<view class="value">
							<text class="place" v-if="type_title === ''"> 请选择类别 </text>

							<text v-else>{{ type_title }}</text>
						</view>
					</picker>
				</view>

				<view class="item">
					<view class="left"> 姓名 </view>

					<input
						class="value"
						type="text"
						placeholder="请输入姓名"
						v-model="name"
						placeholder-class="place"
					/>
				</view>

				<view class="item">
					<view class="left"> 联系方式 </view>

					<input
						class="value"
						type="text"
						placeholder="请输入联系方式"
						v-model="mobile"
						maxlength="11"
						placeholder-class="place"
					/>
				</view>

				<view class="content">
					<view class="left"> 咨询内容 </view>

					<view class="area-bg">
						<textarea
							class="area"
							v-model="content"
							placeholder="请描述您需要咨询的问题"
							placeholder-class="place"
							maxlength="300"
						/>

						<view class="limit-num"> {{ content.length }}/300 </view>
					</view>
				</view>

				<view class="btn" @click="onSubmit"> 提交 </view>
			</view>
		</view>
	</div>
</template>

<script>
	import { getTypeListData, createFeedbackData } from "@/utils/api";
	export default {
		data() {
			return {
				typeList: [],

				type_title: "",
				type_id: "",

				name: "",
				mobile: "",
				content: "",
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			/**
			 * 类型选择
			 */
			onTypeChange(e) {
				const index = e.detail.value;
				this.type_title = this.typeList[index].title;
				this.type_id = this.typeList[index].feedbackTypeId;
			},
			/**
			 * 提交
			 */
			onSubmit() {
				if (this.type_id === "") {
					this.$st.show("请选择类型");
					return;
				}
				if (this.name === "") {
					this.$st.show("请输入姓名");
					return;
				}
				if (this.mobile === "") {
					this.$st.show("请输入联系方式");
					return;
				}
				if (this.content === "") {
					this.$st.show("请输入留言内容");
					return;
				}
				createFeedbackData({
					feedbackTypeId: this.type_id,
					content: this.content,
					contact: this.mobile,
					name: this.name,
				}).then((res) => {
					this.$st.success("提交成功");
				});
			},
			/**
			 * 获取类型
			 */
			getData() {
				getTypeListData().then((res) => {
					this.typeList = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}
	.wrap {
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;

		.wrap-content {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.item {
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #e5e5e5;
			padding: 30rpx 0;

			&:last-child {
				border-bottom: none;
			}

			.left {
				color: #333;
				font-size: 26rpx;
			}

			.value {
				width: 500rpx;
				height: 50rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #333;
				font-size: 26rpx;
				text-align: right;
			}
		}

		.content {
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			overflow: hidden;
			display: flex;
			padding: 30rpx 0;
		}
		.area-bg {
			margin-top: 30rpx;
			width: 100%;
			height: 550rpx;
			background-color: #f6f6f6;
			border-radius: 15rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;
			padding: 30rpx;
			box-sizing: border-box;

			.area {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
				color: #333;
			}

			.limit-num {
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				color: #666666;
				font-size: 26rpx;
				z-index: 2;
			}
		}
		.btn {
			margin-top: 10rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #ea5520;
			color: white;
			font-size: 30rpx;
			text-align: center;
			overflow: hidden;
			border-radius: 44rpx;
		}
	}

	/deep/ .place {
		color: #666666;
	}

	view {
		line-height: 1;
	}
</style>
